<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <!-- <img src="../assets/he.gif" alt=""> -->
        <!-- <img src="" alt=""> -->
      </div>
      <el-tabs v-model="activeName" class="login_form" :stretch="true">
        <el-tab-pane label="登录" name="login">
          <!-- 登录表单区域 -->
          <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px">
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码" type="password"></el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="btns">
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="info" @click="$refs.loginFormRef.resetFields()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="reguser">
          <!-- 注册表单区域 -->
          <el-form ref="reguserFormRef" :model="reguserForm" :rules="reguserFormRules" label-width="0px">
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input v-model="reguserForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input v-model="reguserForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码" type="password"></el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="verCode">
              <el-col :span="14"><el-input v-model="reguserForm.verCode" prefix-icon="el-icon-edit-outline" placeholder="请输入验证码" maxlength="6"></el-input></el-col>
              <el-col :span="10" @click.native="generateMixed(6)"><verCode :randomString="randomString"></verCode></el-col>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="btns">
              <el-button type="primary" @click="reguser">注册</el-button>
              <el-button type="info" @click="resetloginForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { api } from '@/api/user.js';
import verCode from '@/components/verCode.vue'
export default {
  components: { verCode },
  data () {
    // 自定义校验规则 验证验证码
    var checkCode = (rule, value, cb) => {
      if (value.length !== 6) return cb(new Error('请输入6位验证码'))
      if (value.toUpperCase() !== this.randomString.toUpperCase()) return cb(new Error('验证码错误'))
      return cb()
    }
    return {
      activeName: 'login',
      randomString: '',
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: 'test003',
        password: '123456'
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      },
      reguserForm: {
        username: '',
        password: '',
        verCode: ''
      },
      // 这是表单的验证规则对象
      reguserFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        // 验证验证码是否合法
        verCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { validator: checkCode, trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
      this.generateMixed(6)
	},
  methods: {
    login () {
      this.$refs.loginFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        // { data: res } 解构
        const { data: res } = await api.login(this.loginForm)
        console.log(res)
        if (res.status !== 0) return this.$message.error(res.message)
        // 1.将登录成功之后的 token ,保存到 store 中
        this.$store.commit('setUserToken', res.token)
        this.$router.push('/')
        setTimeout(_ => this.$message.success('登录成功'), 700) 
      })
    },
    reguser () {
      console.log(this.$refs.reguserFormRef);
      this.$refs.reguserFormRef.validate(async valid => {
        console.log(valid)
        if (!valid) return
        // { data: res } 解构
        const { data: res } = await api.reguser(this.reguserForm)
        console.log(res)
        if (res.status !== 0) return this.$message.error(res.message)
        this.$message.success('注册成功')
        this.loginForm = this.reguserForm
      })
    },
    // 重置注册
    resetloginForm() {
      this.$refs.reguserFormRef.resetFields()
      this.generateMixed(6)
    },
    // 随机字符串
    generateMixed(n) {
      var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
      var res = '';
      for (var i = 0; i < n; i++) {
          var id = Math.ceil(Math.random() * 35);
         res += chars[id];
      }
      this.randomString = res;
      // console.log(res.toUpperCase());
      return true
    }
  }
}
</script>

<style scoped lang="less">
.login_container {
  // background-color: #2b4b6b;
  // background: url(../assets/bj.gif) no-repeat;
  // background: url(https://img.iabao.com/imgs/2020/09/fcd11a0bab1e703e.gif) no-repeat;
  background-size: 100% 100%;
  height: 100%;
  .login_box {
    opacity: 0.7;
    width: 450px;
    height: 300px;
    background-color: #fff;
    // background: url(../assets/car.gif);
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // 头像区域
    .avatar_box {
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
    .login_form {
      margin-top: 80px;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      .btns {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
